<template>
    <div class="content">
        <div class="warp">
            <el-container>
                <el-header height="60px" class="header">
                    <el-page-header @back="goBack" content="修改帖子">
                    </el-page-header>
                </el-header>
                <el-container>
                    <el-main height="">
                        <!-- Main content -->


                        <el-form :model="form" ref="form">
                            <el-form-item label="社区：" size="normal" >
                            {{ postDetail.communityInfo?.name??"-无-" }}
                            </el-form-item>
                            <el-form-item label="板块：" size="normal" >
                            {{ postDetail.sectionName?postDetail.sectionName:"-无-" }}
                            </el-form-item>
                            <el-form-item label="标题：" prop="title" size="normal" required>
                                <el-input style="width: 80%;" v-model="form.title" placeholder="请输入标题"
                                    maxlength="40"></el-input>
                            </el-form-item>


                            <el-form-item prop="content" size="normal">
                                <TinymceEditor style="margin-left: 65px;" ref="tinymc" :value="form.content" @getImage="getImage"
                                    @input="newContent"></TinymceEditor>
                            </el-form-item>
                        </el-form>
                        <hr>
                    </el-main>

                </el-container>
                <el-footer>
                    <!-- Footer content -->
                    <div style="display: flex;align-items: center;justify-content: center;flex-direction: column">
                        <el-button style="width: 120px;" type="primary" size="default" @click="submit">提交</el-button>

                    </div>
                </el-footer>

            </el-container>

        </div>
    </div>
</template>

<script>
import TinymceEditor from "@/components/TinyEditor"
import * as SectionAPI from '@/api/section/section'
import * as PostAPI from '@/api/post/post'
import tinymce from "tinymce";
export default {
    data() {
        return {
            form: {
                id:null,
                content: null,
                title: null,
                coverPic:null

            },
            postDetail:{},
            id: null,
            taskOk: false,

        }
    },
    components: {
        TinymceEditor,
    },
    methods: {
        goBack() {
            this.$router.back();
        },
        newContent(val) {

            this.form.content = val; // 直接更新 content 属性
        },
        getSectionList() {
            SectionAPI.getSectionList(this.communityId).then(res => {
                this.sectionList = res.data;
                this.sectionList.unshift({ id: -1, name: '无' })
            })
        },
        getPostDetail(id){
            PostAPI.getPostDetail({id:id}).then(res=>{
                console.log(res.data);
                this.form.id = id;
                this.form.content = res.data.content;
                this.form.title = res.data.title;
                this.postDetail = res.data;
            })
        },
        submit() {
            console.log(this.form);
            this.$refs.form.validate((valid, fields) => {
                if (valid) {
                    this.getImage();
                    PostAPI.updateMyPost(this.form).then(res => {
                        this.$router.push('/community?id=' + this.postDetail.communityId);
                        this.$message({
                            type: 'success',
                            message: res.msg
                        })
                    })
                    console.log("发送", this.form)
                    this.taskOk = false;
                }
            })

        },
        getImage() {//从tynimc文本区的dom中提取所有img标签的src值
            console.log(tinymce.activeEditor.getBody())
            let $ = tinymce.util.Tools.resolve('tinymce.dom.DomQuery');
            let bodydom = tinymce.activeEditor.getBody();
            let imgdomlist = bodydom.getElementsByTagName('img');
            console.log(imgdomlist)
            let srclist = []
            for (let i = 0; i < imgdomlist.length; i++) {
                srclist.push(imgdomlist[i].attributes.src.value);
                console.log(imgdomlist[i])
            }
            this.form.coverPic = srclist.toString();
        }
    },
    beforeRouteEnter(to, from, next) {
        if (!to.query.id) {
            alert('帖子不存在')
        } else {
            PostAPI.isMyPost({postId:to.query.id}).then(res=>{
                if(!res.data.isMy){
                    alert("不能修改其他人的帖子");
                }else{
                    next();
                }
            })
            
        }

    },
    mounted() {
        this.id = this.$route.query.id;
        console.log(this.id)
        this.getPostDetail(this.id);
    },
}
</script>

<style lang="scss" scoped>
.content {
    width: 1146px;
    margin: auto;
    // background-color: pink;
    position: relative;
    display: flex; //必要的，否则会导致.warp元素margin-top失效
    flex-direction: column;

}

.warp {
    margin-top: 20px;
    min-height: calc(100vh - 91px);
    background-color: white;

}

.header {
    // background-color: aqua;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #e4e6eb;
}
</style>